<script lang="ts" setup>
import {
  ChevronLeftDoubleIcon,
  ChevronRightDoubleSIcon,
  DiscountIcon,
  Fullscreen1Icon,
  FullscreenExit1Icon,
  LogoGithubFilledIcon,
  MenuFoldIcon,
  MenuUnfoldIcon,
  ModeDarkIcon,
  ModeLightIcon,
  UserCircleIcon
} from "tdesign-icons-vue-next"

import { useThemeModeStore } from "@/store/themeMode"
import { useFullScreen } from "@/utils/fullScreen"
import Breadcrumb from "@/components/breadcrumb/Breadcrumb.vue"
import { useResponsiveLayoutStore } from "@/store/responsiveLayout"
import { post } from "@/utils/api"
import router from "@/router"
import { MessagePlugin } from "tdesign-vue-next"

const store = useResponsiveLayoutStore()

// 主题样式调节
const themeMode: any = useThemeModeStore()

// 全屏样式调节
const { isFullScreen, changeFullScreen, isMobile } = useFullScreen()
const options = [
  {
    content: "个人中心",
    onClick: () => {
      alert("1")
    },
    divider: true,
  },
  {
    content: "退出登录",
    onClick: async ()=>{
      const response = await post("/api/admin/logout")
      if(response.status === "success"){
        localStorage.removeItem("isLogin")
        await router.push({ path: "/login/admin" })
        await MessagePlugin("success", "成功退出登录！")
      }
    }
  }
]

</script>
<template>
  <div class="container">
    <t-head-menu default-value="2-1" expand-type="popup">

      <!--收缩组件-->
      <t-button v-if="store.showType === 'aside'" shape="circle" theme="default" @click="store.changeCollapsed()">
        <ChevronRightDoubleSIcon  v-if="store.isCollapsed"/>
        <ChevronLeftDoubleIcon v-else />
      </t-button>
      <!--收缩组件-->

      <!--抽屉组件-->
      <t-button v-else shape="circle" theme="default" @click="store.changeOpen()">
        <template #icon>
          <MenuFoldIcon v-if="!store.open" />
          <MenuUnfoldIcon v-else />
        </template>
      </t-button>
      <!--抽屉组件-->

      <Breadcrumb />

      <template #operations>
        <!--跳转开发文档-->
        <t-button shape="circle" theme="default" tag="a" href="https://www.baidu.com" target="_blank">
          <DiscountIcon />
        </t-button>
        <!--跳转开发文档-->

        <!--跳转Github-->
        <t-button shape="circle" theme="default" tag="a" href="https://github.com/maomaojiujiu" target="_blank">
          <template #icon>
            <LogoGithubFilledIcon />
          </template>
        </t-button>
        <!--跳转Github-->

        <!--全屏显示组件-->
        <t-button v-if="!isMobile" shape="circle" theme="default" @click="changeFullScreen()">
          <Fullscreen1Icon v-if="!isFullScreen" />
          <FullscreenExit1Icon v-else/>
        </t-button>
        <!--全屏显示组件-->

        <!--主题样式组件-->
        <t-button shape="circle" theme="default" @click="themeMode.change()">
          <ModeLightIcon v-if="themeMode.isLight" />
          <ModeDarkIcon v-else/>
        </t-button>
        <!--主题样式组件-->

        <!--个人中心-->
        <t-dropdown :options="options">
          <t-button shape="circle" theme="default">
            <UserCircleIcon />
          </t-button>
        </t-dropdown>
        <!--个人中心-->
      </template>

    </t-head-menu>
  </div>

</template>
<style lang="less" scoped>
.container {
  padding-right: 4px;
}

.t-menu__operations {
  .t-button {
    margin-left: 8px;
  }
}

.t-demo-menu--dark {
  .t-button {
    color: #fff;

    &:hover {
      background-color: #4b4b4b;
      border-color: transparent;
      --ripple-color: #383838;
    }
  }
}
</style>
